﻿{% extends "gma/base.html" %}
{% load static %}

<title>{% block title %} 用户定位 {% endblock title %}</title>

<!-- CONTENT
  =====================================================================-->

{% block content %}

    <div class="page__hd">
        <h1 class="page__title">
            <i class="fa fa-search-location my-page-title-icon"> </i>
        </h1>
        <p class="page__desc">可根据用户的id，昵称，设备号，终端IP地址来进行查找。</p>
    </div>

    <div class="page__bd">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" method="get" action="{% url 'gma:search_caster' %}">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="输入主播ID或者名称..." name="search_value" required/>
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>

    {% if not search_history_data %}
        <div class="weui-cells__title">  </div>
    {% else %}
        <div class="weui-cells__title"> 搜索历史 </div>
        <div class="weui-cells">
            {% for search_value in search_history_data %}
            <a class="weui-cell weui-cell_access" href="{% url 'gma:search_caster_by' search_value %}">
                <div class="weui-cell__bd"> 搜索 </div>
                <div class="weui-cell__ft"> {{ search_value|slice:"0:30" }} </div>
            </a>
            {% endfor %}
        </div>
    {% endif %}
    </div>

{% if search_history_data|length < 8 %}
    <div class="page__ft j_bottom">
{% else %}
    <div class="page__ft">
{% endif %}
        <a href="{% url 'gma:home' %}">
            <span class="bottom-logo">
               <i class="fab fa-pied-piper-pp my-footer-logo"></i> PPTV
           </span>
        </a>
    </div>

{% endblock content %}


<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}

<script type="text/javascript">
    $(function() {
        var $searchBar = $('#searchBar'),
            $searchResult = $('#searchResult'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel');

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
            .on('blur', function () {
                if(!this.value.length) cancelSearch();
            })
            .on('input', function(){
                if(this.value.length) {
                    $searchResult.show();
                } else {
                    $searchResult.hide();
                }
            })
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });

        hideSearchResult();
    });
</script>
{% endblock extra_js %}